<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Merry Christmas!</title>
    <script type="text/javascript" src='http://zgrossbart.github.com/Dandelion/paper.js'></script>
    <script type="text/paperscript" canvas='mycanvas'>
        var center = new Point(680, 80);
        var points = 5;
        var radius1 = 18;
        var radius2 = 25;

        var randColor = ['#F2385A','#F5A503','#E9F1DF','#4AD9D9','#36B1BF','#274C00','#7F9400','#D4D34D','#EDFFA9','#DB4646'];
        var randText = ['☆','love','sj','rx','♥','◇','520','★',];

        function getRandomNum(first,last){
            return Math.floor(Math.random()*(last-first+1)+first);
        }
        function charater(pos){
            var instance= new PointText(pos);
            instance.fontSize = 20;
            instance.content = randText[getRandomNum(0,7)];
            instance.fillColor = randColor[getRandomNum(0,9)];
            instance.rotate(Math.random()*360);
            instance.scale(0.5+Math.random()*0.5);
            instance.dest = new Point(getRandomNum(550,810),730);
            return instance;
        }
        function rotateMove(self,angle){
            if(self.position.y<450){
                var vector = self.dest - self.position;
                self.position.y += self.bounds.width/10;
                self.position.x += vector.x/50;
                self.rotate(angle);
                self.fillColor.hue +=3;
                //self.fillColor.alpha -=0.006;
            }else{
                self.remove();
            }
        }
        var group = new Group();
        var gapTime = 30;
        init(30);
        function init(nameCount){
            for(var i=0;i<nameCount;i++){
                var ralmond = new charater(new Point(665,100));
                group.addChild(ralmond);
            }
        }
        function onFrame(event){
            for(var i=0;i<group.children.length;i++){
                rotateMove(group.children[i],5);
            }
            gapTime--;
            if(gapTime<0){
                init(5);
                gapTime = 10;
            }


            star.rotate(3);
            star.fillColor.hue +=3
        }
        var star = new Path.Star(center, points, radius1, radius2);
        star.fillColor = 'yellow';
    </script>
</head>
<body>
<canvas id='mycanvas' resize></canvas>
</body>
</html>